<template>
	<view class="content-class">
		<u-row class="user-info" justify="space-between">
			<u-row>
				<image :src="icon"></image>
				<view class="info">
					{{person.name}}
					<span> 手机：{{person.phone}}</span>
				</view>
			</u-row>
		</u-row>
		<u-row justify="space-between">
			<u-image style="transform: rotate(180deg);margin-left:10px" width="20px" height="20px"
				src="../../static/images/measuring/arrow.png"></u-image>
			<span style="font-size: 16px;color:#999;font-weight: bold;">2025-02-12</span>
			<u-image style="margin-right:10px" width="20px" height="20px"
				src="../../static/images/measuring/arrow.png"></u-image>
		</u-row>
		<view v-for="item in itemList" :key="item.index">
			<u-row class="item-title">{{item.title}}</u-row>
			<view class="card" v-for="i in getCardList(item)" :key="i.title">
				<u-row>
					<u-col :span="6">
						<u-row>
							<image style="width: 18px;height: 18px;margin-right: 8px;" :src="i.icon"></image>
							{{i.title}}
							<span style="font-size: 12px;margin-left: 8px;" v-if="i.title == '检查更新'">V1.0.1</span>
						</u-row>
					</u-col>
					<u-col textAlign="right" :span="6">
						<u-row justify="flex-end" class="sub-title">
							<view v-if="i.unit1" class="number">
								{{i.subTitle ? i.subTitle.split('h')[0]:'' }}<span>{{i.unit}}</span>{{i.subTitle ? i.subTitle.split('h')[1].replace('min',''):'' }}<span>{{i.unit1}}</span>
							</view>
							<view v-else class="number">{{i.subTitle }}<span>{{i.unit}}</span></view>
						</u-row>
					</u-col>
				</u-row>
			</view>

		</view>
	</view>
</template>

<script>
	import index from '../../api';

	export default {
		data() {
			return {
				icon: require("../../static/images/homePage/tx.png"),
				person: {},
				itemList: [{
					index: 1,
					title: '健康数据'
				}, {
					index: 2,
					title: '运动数据'
				}],
				cardList1: [{
					title: '睡眠质量',
					icon: require("../../static/images/homePage/smzl.png"),
					subTitle: '06h50min',
					unit: 'h',
					unit1: 'min',
				}, {
					title: '心率',
					icon: require("../../static/images/homePage/xl.png"),
					subTitle: '93',
					unit: 'bpm'
				}, {
					title: '血氧浓度',
					icon: require("../../static/images/homePage/xy.png"),
					subTitle: '93',
					unit: '%'
				}, {
					title: '心率变异性',
					icon: require("../../static/images/homePage/xlbyx.png"),
					subTitle: '93',
					unit: 'ms'
				}, {
					title: '压力',
					icon: require("../../static/images/homePage/yl.png"),
					subTitle: '93',
				}, {
					title: '血糖',
					icon: require("../../static/images/homePage/xt.png"),
					subTitle: '6.1',
					unit: 'mmol/L'
				}, {
					title: '体温变化',
					icon: require("../../static/images/homePage/tw.png"),
					subTitle: '-0.02',
					unit: '℃'
				}, {
					title: '最大摄氧量',
					icon: require("../../static/images/homePage/zdsyl.png"),
					subTitle: '10.3',
					unit: 'ml/kg/min'
				}],
				cardList2: [{
					title: '运动步数',
					icon: require("../../static/images/homePage/yd.png"),
					subTitle: '6548',
					unit: 'min'
				}, {
					title: '消耗热量',
					icon: require("../../static/images/homePage/xhrl.png"),
					subTitle: '93',
					unit: 'kcal'
				}, {
					title: '运动距离',
					icon: require("../../static/images/homePage/ydjl.png"),
					subTitle: '93',
					unit: 'km'
				}]
			}
		},
		onLoad(e) {
			if (e.person) {
				this.person = JSON.parse(e.person)
			}
		},
		methods: {
			getCardList(i) {
				return this[`cardList${i.index}`]
			}
		}
	}
</script>

<style scoped lang="scss">
	.content-class .u-row:not(:first-child) {
		margin: 12px 0px;
	}

	.content-class {
		padding: 15px;

		.item-title {
			padding-bottom: 12px
		}

		.card {
			width: 100%;
			background: #1B1B1B;
			border-radius: 12px;
			margin-bottom: 12px;
			padding: 17px;
			box-sizing: border-box;




			::v-deep .u-icon {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				justify-content: center;
				background: linear-gradient(180deg, #242820 0%, #171314 100%);
				border: 0px solid;
				border-image: linear-gradient(180deg, rgba(126, 116, 94, 1), rgba(24, 20, 21, 1)) 0 0;
			}

			.sub-title {
				font-size: 12px;
				color: rgba(255, 255, 255, 0.5);
				text-align: left;

				.number {
					font-size: 20px;
					color: #FFFFFF;

					span {
						font-size: 8px;
						margin: 0px 1px;
					}
				}


			}
		}

		.user-info {
			padding: 5px 0px 10px 0px;
			font-size: 18px;

			image {
				width: 58px;
				height: 58px;
				margin-right: 8px;
			}

			.info {
				display: flex;
				flex-direction: column;

				span {
					margin-top: 6px;
				}
			}

			span {
				font-size: 12px;
				color: rgba(255, 255, 255, 0.5);
				margin-right: 6px;
			}
		}
	}
</style>